<template>
  <div :id="dom_class" :style="{'height':height,'width':width}"></div>
</template>

<script>
import {single_option} from "@/utils/echarts_option/single_line"
import {getStyleByEl} from "@/utils/dom/get_dom_style";

export default {
  props: {
    dom_class: {
      type: String,
      default: ""
    },
    height_width: {
      type: Object,
      default: {}
    },
  },
  name: "single_line_wps",
  data() {
    return {
      height: "",
      width: ""
    }
  },
  methods: {
    async init(data, num) {
      const {
        height,
        width
      } = await this.get_style_dom(this.dom_class)
      this.height = height;
      this.width = width;
      const {x_data, y_data} = data
      const echarts = this.$echarts.init(document.getElementById(this.dom_class))
      single_option.series[0].data = y_data;
      single_option.xAxis.data = x_data;
      single_option.title.subtext = "总数：" + (num ? num : 0)
      echarts.setOption(single_option)
    },
    handle_data_line(data) {
      return {};
    },
    get_style_dom(dom) {
      const el = document.getElementById(dom);
      const style = getStyleByEl(el)
      const height = style.height;
      const width = style.width;
      return {
        height,
        width
      }
    }
  },
  async mounted() {
    const {
      height,
      width
    } = await this.get_style_dom(this.dom_class)
    this.height = height;
    this.width = width;
    // await this.init()
  }
}
</script>

<style scoped>

</style>
